<template>
  <div class="app">
      <div class="Customize_head">
        <Customizehead />
      </div>
      <div class="top">
        <!-- 第一个 -->
        <dv-border-box-10 class="Box">
          <div class="bottomtitle">实时车辆运行情况</div>
          <div class="one1">
             <div>
                <img src="../../assets/img/two.png" style="width:12vw ;"/>
                <div class="oneText">{{total}}</div>
             </div>
             <div class="desc">车辆总数</div>
          </div>
          <div class="one2">
             <div>
                <img src="../../assets/img/two.png" style="width:12vw ;"/>
                <div class="oneText">{{authorityTotal}}</div>
             </div>
             <div class="desc">管理车辆数</div>
          </div>
         
          <div class="one1">
            <div>
                <img src="../../assets/img/two.png" style="width:12vw ;"/>
                <div class="oneText">{{online}}</div>
             </div>
             <div class="desc">在线车辆数</div>
          </div>
          <div class="one2">
            <div >
                <img src="../../assets/img/two.png" style="width:12vw ;"/>
                <div class="oneText">{{authorityOnline}}</div>
             </div>
             <div class="desc">离线车辆数</div>
          </div>
         
        </dv-border-box-10>
        <!-- 第二个 -->
        <dv-border-box-10 class="Box">
          <div class="bottomtitle">实时终端运行详情</div>
          <dv-scroll-board :config="two" class="bottomChart2" />
        </dv-border-box-10>
        <!-- 第三个 -->
        <dv-border-box-10 class="Box">
          <div class="bottomtitle">文件提取记录排行</div>
          <dv-scroll-ranking-board :config="three" class="bottomChart" />
        </dv-border-box-10>
      </div>
      <div class="bottom">
        <!-- 第四个 -->
        <dv-border-box-10 class="Box">
          <div class="bottomtitle"> 驾驶员打卡记录排行</div>
          <dv-capsule-chart :config="four" class="bottomChart4" />
        </dv-border-box-10>
        <!-- 第五个 -->
        <dv-border-box-10 class="Box">
          <div class="bottomtitle">今日驾驶员打卡详情</div>
          <dv-scroll-board :config="five" class="bottomChart5"   />
        </dv-border-box-10>
        <!-- 第六个 -->
        <dv-border-box-10 class="Box">
          <div class="bottomtitle">今日报警记录排行</div>
          <dv-scroll-ranking-board :config="six" class="bottomChart" />
        </dv-border-box-10>
      </div>
  </div>
</template>
    
<script>
import Customizehead from "@/components/Customize-head"
import api from "@/api/api";
export default {
  components: { Customizehead },

  props: {

  },
  data: function () {
    return {
      //第一个
      total:0,
      authorityTotal:0,
      online:0,
      authorityOnline:0,
      //第二个
      two:{},
      //第三个
      three: {},
      //第四个
      four:{},
      //第五个
      five: {},
     
      //第六个
      six: {}
    }
  },
  mounted() {
    this.selectLargeScreen();
  },
  methods: {
    selectLargeScreen(){
      api.selectLargeScreen().then(res=>{
        if(res.code==0){
         var list= res.data;
          this.total=list.total;
          this.authorityTotal=list.authorityTotal;
          this.online=list.online;
          this.authorityOnline=list.authorityOnline;
          this.twoList(list.deviceList);
          this.threeList(list.ftpList);
          this.fourList(list.list);
          this.fiveList(list.cardList);
          this.sixList(list.securityList)
        }else if(res.code==1){
         
        }else{
          localStorage.removeItem('token');
                    this.$router.replace({
                        path:"/" 
                    })
        }
      })
    },
    //第二个
    twoList(deviceList) {
         var lists=[]
        // 遍历 deviceList 数组
        for (let device of deviceList) {
          // 构造单行数据数组
          const row = [
            device.mobileNo,
            device.onlineStatus==0?'离线':'在线',
            device.deviceTime
          ];
          // 将单行数据数组添加到 data 数组中
          lists.push(row); 
        }
        this.two = { 
            align: ["center","center","center","center"],
            index:true,
            indexHeader:'序号',
            columnWidth: [80,120,130],
            header: ['设备号', '状态', '在线/离线时间'],
            oddRowBGC:'transparent',
            evenRowBGC:'transparent',
            hoverPause:true,
            data: lists,
            rowNum:7
          }
       
    },
    //第三个
    threeList(ftpList){
      this.three={
        rowNum: 10,
        data:ftpList,
      }
    },
    //第四个
    fourList(list){
      this.four={
        data: list,
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        unit: '次数',
        showValue: true
      };
    },
    //第五个
    fiveList(cardList){
      var lists=[];
      // 遍历 deviceList 数组
      for (let device of cardList) {
          // 构造单行数据数组
          const row = [
            device.mobileNo,
            device.driverName,
            device.insertCardTime!=null?this.format(device.insertCardTime):"",
            device.outCardTime!=null?this.format( device.outCardTime):""
          ];
          // 将单行数据数组添加到 data 数组中
          lists.push(row); 
        }
       
        this.five={
              index:true,
              indexHeader:'序号', 
              align: ["center","center","center","center","center"],
              header: ['设备号', '驾驶员', '插卡时间','拔卡时间'],
              oddRowBGC: 'transparent',
              evenRowBGC:'transparent',
              hoverPause:true,
              columnWidth: [60,111,70],
              data: lists,
              rowNum:7
        }
    },
     format(input){
          // 提取年、月、日、时、分、秒信息
          const year = "20" + input.substr(0, 2);
          const month = input.substr(2, 2);
          const day = input.substr(4, 2);
          const hours = input.substr(6, 2);
          const minutes = input.substr(8, 2);
          const seconds = input.substr(10, 2);
          // 构造日期时间字符串
          return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
     },
    //第六个
     sixList(securityList){
      this.six= {
         rowNum: 10,
         data: securityList
      };
    },
   
  }

}

</script>
<style scoped>


.app{
  height: 100vh;
  background-image: url("../../assets/img/pageBg.png");
}
.top{
  width: 98vw;
  height: 43vh;
  margin-top: 3vh;
  text-align: center;
  margin-left: 0.8vw;
}
.bottom{
  width: 98vw;
  height: 43vh;
  margin-top: 3vh;
  text-align: center;
  margin-left: 0.8vw;
}
.bottomtitle{
  color: #fff;
  background-color: #00BAFF;
  position: absolute;
  width: 10vw;
  height: 4vh;
  left: 11vw;
  top: -2vh;
  line-height: 4vh;
  border-radius: 100px;
}
:deep(.dv-scroll-ranking-board .ranking-info .rank){
  color: #fff;
}
:deep(.dv-scroll-ranking-board .ranking-column .inside-column){
  background-color: #00BAFF;
}
:deep(.dv-scroll-ranking-board .ranking-column){
  border-bottom: #00BAFF solid 2px;
}
:deep(.dv-scroll-board .rows .row-item){
  border-bottom: #00BAFF solid 2px;
}
.bottomChart{
  padding-top: 3vh;
  margin-left: 1vw;
  width:29vw;
  height:37vh;
}

.bottomChart2{
  padding-top: 3vh;
  margin-left: 2vw;
  width:29vw;
  height:35vh;
}
.bottomChart4{
  padding-top: 3vh;
  margin-left: 2vw;
  width:28vw;
  height:41vh;
}
.bottomChart5{
  padding-top: 3vh;
  margin-left: 2vw;
  width:29vw;
  height:35vh;
}
.Box{
  width: 32vw;
  float: left;
  margin-left: 0.6vw;
  position: relative;
 
}



.one1{
  float: left;
  margin-left: 2vw;
  margin-top: 2vh;
  position: relative;
}

.one2{
   float: right;
   margin-top: 2vh;
   margin-right: 2vw;
   position: relative;
}
.oneText{
  position: absolute;
  color: #fff;
  width:12vw ;
  top: 6vh;
  
}
.oneTitle{
  color: #fff;
  background-color: #112A6D;
  position: absolute;
  width: 10vw;
  height: 4vh;
  left: 11vw;
  top: -2vh;
  line-height: 4vh;
  border-radius: 100px;
}

.desc{
  background-image: url("../../assets/img/desc.png");
  color: #fff;
  width:12vw ;
  height: auto;
  margin-top: 1vh;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


</style>




    